<template>
	<view>
		<view class="search-box">
			<input type="text" placeholder="请输入搜索关键词" v-model="searchKeyword" @input="onInput" @clear="onClear"
				@confirm="onSearch" />
			<button @click="onSearch">搜索</button>
		</view>
		<view>
			<checkbox-group @change="checkedList">
				<label class="uni-list-cell" v-for="(item,index) in list" :key="index">
					<view class="listbox">
						<image :src="fullUrl(item.avatar)" v-if="item.avatar" mode="aspectFill" class="listimg"></image>
						<image src="../../static/images/logo.png" mode="aspectFill" v-if="!item.avatar" class="listimg">
						</image>
						<view style="margin-left:10px;">
							<view>{{item.username}}</view>
							<view v-if="item.sex==0" style="font-size:12px;color:#333">未知</view>
							<view v-if="item.sex==1">男</view>
							<view v-if="item.sex==2">女</view>
							<view>{{item.desc}}</view>
						</view>
					</view>
					<view class="listcheck">
						<checkbox :value="item.id" :checked="false" />
					</view>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { getPageListApi } from '@/api/peiwan'
	import { ref, watch } from 'vue'
	import { pageUrl } from '@/utils/constants'
	import { fullUrl } from '@/utils/common'


	//搜索部分代码
	const searchKeyword = ref('')
	const onInput = (event:any)=> {
		searchKeyword.value = event.detail.value;
	}
	const onClear = ()=> {
		searchKeyword.value = '';
	}
	const onSearch = ()=> {
		if (searchKeyword.value.trim()) {
			// 执行搜索逻辑，比如调用API
			console.log('搜索关键词：', searchKeyword.value)
			queryList(0,0,searchKeyword.value)
		} else {
			uni.showToast({
				title: '请输入搜索关键词',
				icon: 'none'
			});
		}
	}

	const queryList = (page : number, page_size : number,keyword : string) => {
		uni.showLoading({
			title: '数据加载中'
		});
		getPageListApi(page, page_size,keyword).then((res:any) => {
			uni.hideLoading(); // 关闭loading动画
			console.log('999999', res)
			res.result.map((item:any) => {
				console.log('888888', item);
			})
			const dataList = res.result;
			if (dataList.length == 0 && params.value.page == 1) {
				// console.log('首次加载没数据');
				noMore.value = false;
				list.value = [];
			} else if (dataList.length < 3 && params.value.page == 1) {
				// console.log('首次加载有数据，但少于4条');
				noMore.value = true;
				list.value = dataList;
			} else if (dataList.length !== 0 && params.value.page == 1) {
				//console.log('1111','首次加载有数据');
				noMore.value = false;
				list.value = dataList;
			} else if (dataList.length !== 0 && params.value.page > 1) {
				//console.log('2222','上拉加载更多数据');
				noMore.value = false;
				list.value = list.value.concat(dataList);
				console.log('66666', list.value);
			} else if (dataList.length == 0 && params.value.page > 1) {
				//console.log('上拉加载没有更多数据了');
				noMore.value = true;
			}
		})
	}
	const checkedList = (e : Event) => {
		var items = list.value,
			values = (e.target as any).value;
		for (var i = 0, lenI = items.length; i < lenI; ++i) {
			items[i].checked = false;
			for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
				if (items[i].value == values[j]) {
					items[i].checked = true;
					break
				}
			}
		}
		let peiwan = [];
		if (values.length != 0) {
			for (let i = 0; i < values.length; i++) {
				peiwan[i] = parseInt(values[i])
			}
		}
		console.log('values', peiwan)
		uni.setStorageSync('peilian', peiwan)
	}

	const noMore = ref(false)
	const isLoading = ref(false)
	const params = ref({ page: 1, pageSize: 10 })
	const list = ref([])
	console.log(params.value)
	onLoad(() => {
		queryList(params.value.page, params.value.pageSize,'')
	})

	onReachBottom(() => {
		if (!noMore.value) {
			params.value.page++;
			queryList(params.value.page, params.value.pageSize,'')
		}
	})

	onPullDownRefresh(() => {
		params.value.page = 1;
		queryList(params.value.page, params.value.pageSize,''); // 获取的数据列表
		uni.showToast({
			title: '刷新成功',
			icon: 'success',
			duration: 1000
		})
		uni.stopPullDownRefresh(); // 停止刷新
	})
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.uni-list-cell {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #ffffff;
		border-radius: 15px;
		width: 94%;
		height: 100px;
		margin: 10px auto;

		.listbox {
			width: 70%;
			height: 100px;
			padding: 10px 20px;
			display: flex;
			flex-wrap: wrap;
		}

		.listimg {
			width: 60px;
			height: 60px;
		}

		.listcheck {
			width: 20%;
			height: 100px;
			padding: 20px
		}
	}
	.search-box {
	  display: flex;
	  align-items: center;
	  padding: 10px;
	  background-color: #fff;
	  border-radius: 4px;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	.search-box input {
	  flex: 1;
	  padding: 0 5px;
	  height:30px;
	  border-radius: 4px 0 0 4px;
	  font-size: 16px;
	}
	
	.search-box button {
	  margin-left: 10px;
	  padding: 0px 10px;
	  background-color: #1aad19;
	  color: #fff;
	  height:30px;
	  line-height:30px;
	  border: none;
	  border-radius: 0 4px 4px 0;
	  font-size: 16px;
	}
</style>